export default {
  inheritAttrs: false,
  inject: {
    coFormItem: {
      default: ''
    }
  },
  props: {
    suffix: String,
    prefix: String,
    disabled: Boolean,
    value: {}
  },
  data () {
    return {
      isFocused: false
    };
  },
  methods: {
    createInput (h, data, children) {
      data.staticClass = `co-input ${data.staticClass || ''}`;
      data.class = {
        ...(data.class || {}),
        'co-input--focus': this.isFocused
      };
      return h('div', data, [
        this.$slots.prepend && this.$slots.prepend.length > 0 ? h('div', {
          staticClass: 'co-input__prepend'
        }, this.$slots.prepend) : null,
        this.prefix ? h('span', { staticClass: 'co-input__text co-input__text--prefix' }, this.prefix) : null,
        ...children,
        this.suffix ? h('span', { staticClass: 'co-input__text co-input__text--suffix' }, this.suffix) : null,
        this.$slots.append && this.$slots.append.length > 0 ? h('div', {
          staticClass: 'co-input__append'
        }, this.$slots.append) : null
      ]);
    }
  },
  watch: {
    isFocused (val) {
      if (!this.coFormItem) return;
      val ? this.coFormItem.onFocus() : this.coFormItem.onBlur();
    }
  }
};
